<!doctype html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link href="css/mui.min.css" rel="stylesheet" />
		<link rel="stylesheet" type="text/css" href="css/style.css" />
		<link rel="stylesheet" type="text/css" href="css/iconfont.css" />
		<style type="text/css">
			.bg {
				background: #F14E11;
				/* 为较旧的或者不支持的浏览器设置备用属性 */
				background: linear-gradient(to right, #F5622B, #DF4408);
			}
			
			.balance *,
			header * {
				color: rgba(255, 255, 255, 1) !important;
			}
			
			.icon-balance {
				font-size: 6em;
				color: #ffb300;
			}
			
			h1 {
				font-size: 4.5em;
			}
		</style>
	</head>

	<body>
		<header class="mui-bar mui-bar-nav bg">
			<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
			<a id="list" class="mui-btn-link mui-pull-right">交易记录</a>
			<h1 class="mui-title">零钱</h1>
		</header>
		<div class="mui-content">
			<div class="mui-table-view margin-top-no bg balance">
				<div class="mui-table-view-cell">
					<h5 style="padding: 30px 0 20px;">我的零钱(元)</h5>
					<h1 style="padding: 10px 0;" v-text="model.Balance.toFixed(2)">0.00</h1>
				</div>
			</div>
			<div class="mui-table-view">
				<div class="mui-table-view-cell">
					<div class="mui-row">
						<div class="mui-col-xs-6">
							<h5>保证金</h5>
							<h3 v-text="model.CashDeposit.toFixed(2)">0.00</h3>
						</div>
						<div class="mui-col-xs-6">
							<h5>总资产</h5>
							<h3 v-text="(model.Balance + model.CashDeposit).toFixed(2)">2325.22</h3>
						</div>
					</div>
				</div>
			</div>
			<div class="mui-content-padded pt-20">
				<button type="button" data-url="account-in.html" class="mui-btn mui-btn-block mui-btn-danger open-window">
						<span class="mui-icon iconfont icon-recharge"></span> 充值
					</button>
			</div>
			<div class="mui-content-padded pt-10">
				<button type="button" data-url="account-out.html" class="mui-btn mui-btn-block open-window">
						<span class="mui-icon iconfont icon-withdraw"></span> 提现
					</button>
			</div>
		</div>

		<script src="js/mui.min.js"></script>
		<script src="js/app.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/vue.min.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			mui.init();

			init = function() {
				var vm = new Vue({
					el: '.mui-content',
					data: {
						'model': null
					},
					created: function() {
						this.$nextTick(function() {
							this.listAjax();
						});
					},
					computed: {},
					methods: {
						listAjax: function() {
							var _self = this;
							app.getAssetData(function(data) {
								console.log(JSON.stringify(data));
								_self.model = data;
							});
						}
					}
				});
			}

			init();
		</script>
	</body>

</html>